<template>
  <view class="container">
    <view class="chapter-list">
      <view class="chapter-item" v-for="chapter in chapters" :key="chapter.id" @click="goToChapterContent(chapter.id)">
        <text class="chapter-title">{{ chapter.title }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      chapters: []
    };
  },
  onLoad(options) {
    this.fetchChapters(options.bookId);
  },
  methods: {
    async fetchChapters(bookId) {
      const res = await this.$api.getChapters(bookId);
      this.chapters = res.data;
    },
    goToChapterContent(chapterId) {
      uni.navigateTo({
        url: `/pages/chapterContent/chapterContent?chapterId=${chapterId}`
      });
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
}
.chapter-list {
  margin-top: 20px;
}
.chapter-item {
  padding: 10px 0;
  border-bottom: 1px solid #ddd;
}
.chapter-title {
  font-size: 18px;
}
</style>